<template>
	<view class="collection">
		<view class="shop">
			<view>共<text class="red">{{shop}}</text>件商品</view>
			<view class="write">编辑</view>
		</view>
		<view class="white" v-for="(item,key) in content" :key="key">
			<view class="picture">
				<image :src="item.image" mode=""></image>
			</view>
			<view class="caption">
				<view class="title">{{item.title}}</view>
				<view class="money">￥{{item.money}}  <text>￥{{item.price}}</text></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				shop:"2",
				content:[
					{image:"/static/images/nf.jpg",title:"Dw袋大厨网红夏威夷坚果大礼包",money:"199",price:"299"},
					{image:"/static/images/nf.jpg",title:"新一代扫地机器人",money:"899",price:"299"},
					{image:"/static/images/nf.jpg",title:"Dw简约轻奢可爱迷人的小牛皮带女表",money:"899",price:"99"},
					]
			}	
		},
		onLoad() {
	
		},
		methods: {
	     
		}
	}
	
	
</script>

<style lang="scss">
	.collection{
		background-color: #F7F6F4;
		height:100vh;
		.shop{
			display:flex;
			justify-content: space-between;
			padding:10rpx 4%;
			font-size: 28rpx;
			.red{
				color:#E66130;
				
			}
			.write{
				color:#E66130;
			}
		}
		.white{
			display:flex;
			justify-content: space-between;
			padding:20rpx 4%;
			font-size: 30rpx;
			background-color: #fff;
			margin:20rpx 0;
			.picture{
				width:30%;
				image{
					width:100%;
					height:180rpx;
					display:block;
				}
			}
			.caption{
				width:70%;
				margin-left:4%;
				.title{
					font-weight: bold;
					line-height: 40rpx;
				}
				.money{
					padding-top:120rpx;
					color:#D13130;
					font-weight: bold;
					text{
						color:#D0D0D0;
						font-weight: normal;
						font-size:20rpx;
						margin:0 4%;
					}
				}
			}
		}
	}
</style>
